<template>
  <div class="screen-container">
    <header class="screen-header">
      <span class="title">湖南历史事件可视化系统</span>
      <div class="title-right">
        <span class="datetime">{{ nowDate }}</span>
      </div>
      <div class="history-search">
        <search></search>
      </div>
      <div class="history-year">
        <TimeBar :timecity="timeCity" ref="timeBar_ref"></TimeBar>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.AgeDistribution ? 'fullscreen' : '']">
          <!-- 年龄分布图表 -->
          <AgeDistribution :timecity="timeCity" ref="AgeDistribution"></AgeDistribution>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('AgeDistribution')"
                  :class="['iconfont', fullScreenStatus.AgeDistribution ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.FigureCity ? 'fullscreen' : '']">
          <!-- 历史人物所属城市图表 -->
          <FigureCity :timecity="timeCity" ref="FigureCity"></FigureCity>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('FigureCity')"
                  :class="['iconfont', fullScreenStatus.FigureCity ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.HuNanBMap ? 'fullscreen' : '']">
          <!-- 湖南地级市图表 -->
          <HuNanBMap ref="HuNanBMap" v-on:getCurrentCity="getCurrentCity"></HuNanBMap>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('HuNanBMap')"
                  :class="['iconfont', fullScreenStatus.HuNanBMap ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.FigureType ? 'fullscreen' : '']">
          <!-- 历史人物类型图表 -->
          <FigureType :timecity="timeCity" ref="FigureType"></FigureType>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('FigureType')"
                  :class="['iconfont', fullScreenStatus.FigureType ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.NameWordCloud ? 'fullscreen' : '']">
          <!-- 历史人物姓氏占比图 -->
          <NameWordCloud :timecity="timeCity" ref="NameWordCloud"></NameWordCloud>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('NameWordCloud')"
                  :class="['iconfont', fullScreenStatus.NameWordCloud ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.sexRatio ? 'fullscreen' : '']">
          <!-- 人物性别比例 -->
          <sexRatio :timecity="timeCity" ref="sexRatio"></sexRatio>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span @click="changeSize('sexRatio')"
                  :class="['iconfont', fullScreenStatus.sexRatio ? 'icon-compress-alt' : 'icon-expand-alt']"></span>
          </div>
        </div>
      </section>
    </div>
    <footer class="screen-foot">
      <div class="time-line">
        <ETimeLine v-on:getBothEndsVal="getBothEndsVal"></ETimeLine>
      </div>
    </footer>
  </div>
</template>

<script>
import AgeDistribution from '@/components/AgeDistribution'
import FigureCity from '@/components/FigureCity'
import FigureType from '@/components/FigureType'
import HuNanBMap from '@/components/HuNanBMap'
import NameWordCloud from '@/components/NameWordCloud'
import Search from '@/components/Search'
import sexRatio from '@/components/sexRatio'
import TimeBar from '@/components/TimeBar'
import TimeLine from '@/components/TimeLine'
import ETimeLine from '@/components/ETimeLine'
import indexdata from '@/api/data/indexdata'

export default {
  components: {
    AgeDistribution,
    FigureCity,
    FigureType,
    HuNanBMap,
    NameWordCloud,
    Search,
    sexRatio,
    TimeBar,
    TimeLine,
    ETimeLine
  },
  data () {
    return {
      // 定义每一个图表的全屏状态
      fullScreenStatus: {
        AgeDistribution: false,
        FigureCity: false,
        FigureType: false,
        HuNanBMap: false,
        NameWordCloud: false,
        sexRatio: false
      },
      nowDate: '',
      timeCity: {
        startYear: 0,
        endYear: 1999,
        city: '',
      },
    }
  },
  methods: {
    //年份初始化
    async yearInit () {
      const res = await indexdata.getMinMaxYear()
      this.timeCity.startYear = res.data.minMaxYear.minYear
      this.timeCity.endYear = res.data.minMaxYear.maxYear
    },
    //获取时间轴的两端的值
    getBothEndsVal (bothEndsYears) {
      this.timeCity.startYear = bothEndsYears.startYear
      this.timeCity.endYear = bothEndsYears.endYear
    },
    //获取当前城市
    getCurrentCity(currentCity){
      this.timeCity.city = currentCity
    },
    changeSize (chartName) {
      // 1.改变fullScreenStatus的数据
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // 2.需要调用每一个图表组件的screenAdapter的方法
      if (chartName !== 'HuNanBMap') {
        this.$refs[chartName].screenAdapter()
        this.$nextTick(() => {
          this.$refs[chartName].screenAdapter()
        })
      } else {
        this.$refs.HuNanBMap.init()
        this.$refs.HuNanBMap.isShowBtn = !this.$refs.HuNanBMap.isShowBtn
      }

    },
    currentTime () {
      setInterval(this.formatDate, 500)
    },
    formatDate () {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  },
  computed: {},
  mounted () {
    this.currentTime()
    this.yearInit()
  },
  beforeDestroy () {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>

<style scoped>
/*全屏样式的定义*/
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 56px;
  font-size: 20px;
  position: relative;
}

.screen-foot {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 2px;
  z-index: 99;
}

.time-line {
  margin-top: 5px;
  height: 50px;
}

> div img {
  width: 100%;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%);
}

.title-right {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-80%);
}

.datetime {
  font-size: 15px;
  margin-left: 10px;
}

img {
  height: 35px;
  width: 128px;
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 5px;
}

.screen-left {
  height: 100%;
  width: 27.6%;
}

#left-top {
  height: 53%;
  position: relative;
}

#left-bottom {
  height: 31%;
  margin-top: 15px;
  position: relative;
}

.screen-middle {
  height: 100%;
  width: 41.5%;
  margin-left: 1.6%;
  margin-right: 1.6%;
}

#middle-top {
  width: 100%;
  height: 56%;
  position: relative;
}

#middle-bottom {
  margin-top: 15px;
  width: 100%;
  height: 28%;
  position: relative;
}

.screen-right {
  height: 100%;
  width: 27.6%;
}

#right-top {
  height: 46%;
  position: relative;
}

#right-bottom {
  height: 38%;
  margin-top: 15px;
  position: relative;
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 99;
}

.history-search {
  left: 10px;
  width: 15%;
  height: 64px;
}

.history-year {
  position: absolute;
  /*right: 40px;*/
  left: 15%;
  top: 10px;
  width: 100%;
  height: 64px;
}

</style>
